// 有时，您可能希望根据传递给它的参数来更改 mixin 的行为

// 根据变量值得不同 匹配不同的mixin

// 有点类似于js的if

@mode: dart;

.mixin(dart; @fontSize: 20px) {
  color: #fff;
}

.mixin(light; @fontSize: 20px) {
  color: black;
}

// 提取公共的部分 调用mixin混合函数时自动调用（期望任何值，所以默认）
.mixin(@_; @fontSize: 20px) {
  font-size: @fontSize;
}

body {
  .mixin(@mode);
}

div {
  .mixin(light, 30px);
}

// ------------ arity -------------

.mixin2(@a) {
  color: @a;
}
.mixin2(@a; @b) {
  color: fade(@a; @b);
}
.a {
  .mixin2(red);
}
.b {
  .mixin2(red, 80);
}

// 现在如果我们.mixin用一个参数调用，我们将得到第一个定义的输出，但是如果我们用两个参数调用它，我们将得到第二个定义
// 即第8个文件中提到的函数重载 根据参数个数匹配对应的函数而执行
